<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>AdminLTE | Mailbox</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <script src="../static/js/right/jquery.min.js"></script>
    <!-- bootstrap 3.0.2 -->
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- font Awesome -->
    <link href="../static/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link href="../static/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <!-- bootstrap wysihtml5 - text editor -->
    <!--<link href="../static/css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />-->
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="../static/css/iCheck/minimal/blue.css" rel="stylesheet" type="text/css"/>
    <!-- Theme style -->
    <link href="../static/css/AdminLTE.css" rel="stylesheet" type="text/css"/>
<body class="skin-blue" style="overflow: hidden">
<script>
    $(document).ready(function () {
        $(".wysihtml5-toolbar").css("display", "none");
        setTimeout(function () {
            $(".wysihtml5-toolbar").css("display", "none");
        }, 1000)
    });
</script>
<script>
    $(function () {
        var isSendMailOky = [[${session?.isSendMailOky}]]
        if(isSendMailOky){
            $.message('发送成功');
        }else{
            $.message({
                message: '发送失败',
                type: 'error'
            });
        }
    })
</script>
<header class="header">
    <a href="index.html" class="logo">
        <!-- Add the class icon to your logo image or logo icon to add the margining -->
        AdminLTE
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button-->
        <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="navbar-right">
            <ul class="nav navbar-nav">
                <!-- User Account: style can be found in dropdown.less -->
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="glyphicon glyphicon-user"></i>
                        <span>个人中心 <i class="caret"></i></span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- User image -->
                        <li class="user-header bg-light-blue">
                            <img src="../static/img/pers/rw1.png" class="img-circle" alt="User Image"/>
                            <p>
                                我
                            </p>
                        </li>
                        <!-- Menu Body -->
                        <li class="user-body">
                            <div class="col-xs-4 text-center">
                                <a href="/findManger">个人信息</a>
                            </div>
                            <div class="col-xs-4 text-center">
                                <a href="/findAllLogs">操作日志</a>
                            </div>
                            <div class="col-xs-4 text-center">
                                <a href="/login">退出登录</a>
                            </div>
                        </li>
                        <!--<li class="user-footer">
                            <div class="pull-right">
                                <a href="#" class="btn btn-default btn-flat">登出</a>
                            </div>
                        </li>-->
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="left-side sidebar-offcanvas">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="../static/img/pers/rw1.png" class="img-circle" alt="User Image"/>
                </div>
                <div class="pull-left info">
                    <p>你好，管理员</p>

                    <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                </div>
            </div>
            <!-- search form -->
            <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="search" class="form-control" placeholder="搜索..."/>
                    <span class="input-group-btn">
                                <button type='submit' name='searchtoUrl' id='search-btn' class="btn btn-flat"><i
                                        class="fa fa-search"></i></button>
                            </span>
                </div>
            </form>
            <!-- /.search form -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu">
                <li>
                    <a href="index.html">
                        <i class="fa fa-dashboard"></i> <span>首页</span>
                    </a>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-bar-chart-o"></i>
                        <span>日志管理</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/LogCatchPre"><i class="fa fa-angle-double-right"></i> 日志获取</a></li>
                        <li><a href="LogAnalysis.html"><i class="fa fa-angle-double-right"></i> 日志分析</a></li>
                        <li><a href="LogWarn.html"><i class="fa fa-angle-double-right"></i> 日志报警</a></li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-table"></i> <span>系统管理</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/SysRightPre"><i class="fa fa-angle-double-right"></i> 权限管理</a></li>
                        <li><a href="/PersRightPre"><i class="fa fa-angle-double-right"></i> 人员管理</a></li>
                    </ul>
                </li>
                <li>
                    <a href="calendar.html">
                        <i class="fa fa-calendar"></i> <span>日历</span>
                    </a>
                </li>
                <li class="active">
                    <a href="/findAllMailsInBox">
                        <i class="fa fa-envelope"></i> <span>邮箱</span>
                    </a>
                </li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="right-side">
        <!-- Content Header (Page header) -->
        <section class="content-header no-margin">
            <h1 class="text-center">
                邮箱
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- MAILBOX BEGIN -->
            <div class="mailbox row">
                <div class="col-xs-12">
                    <div class="box box-solid">
                        <div class="box-body">
                            <div class="row" id="mailpre" style="display: block" th:if="${mailDeletedList}!=null">
                                <div class="col-md-3 col-sm-4">
                                    <!-- BOXES are complex enough to move the .box-header around.
                                         This is an example of having the box header within the box body -->
                                    <div class="box-header">
                                        <i class="fa fa-inbox"></i>
                                        <h3 class="box-title">收件箱</h3>
                                    </div>
                                    <!-- compose message btn -->
                                    <a class="btn btn-block btn-primary" data-toggle="modal"
                                       data-target="#compose-modal"><i class="fa fa-pencil"></i> 新建邮件</a>
                                    <!-- Navigation - folders-->
                                    <div style="margin-top: 15px;">
                                        <ul class="nav nav-pills nav-stacked">
                                            <li class="header">文件夹</li>
                                            <li><a href="/findAllMailsInBox"><i class="fa fa-inbox"></i> 收件箱 </a></li>
                                            <li><a href="/findAllMailsSended"><i class="fa fa-mail-forward"></i> 已发送</a>
                                            </li>
                                            <li class="active"><a  onclick="function getMailsDeleted() {
                                        $.ajax(
                                            {
                                            type:'get',
                                            url:'/findAllMailsDeleted',
                                            date:{
                                                pageNum:0,
                                                pageSize:8
                                            },
                                            dataType:'json',
                                            }
                                        )
                                    }
                                    getMailsDeleted()"><i class="fa fa-folder"></i> 已删除</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /.col (LEFT) -->
                                <div class="col-md-9 col-sm-8" >
                                    <div class="row pad">
                                        <!--<div class="col-sm-6 search-form">
                                            <form action="#" class="text-right">
                                                <div class="input-group">
                                                    <input type="text" class="form-control input-sm" placeholder="搜索邮件">
                                                    <div class="input-group-btn">
                                                        <button type="submit" name="q" class="btn btn-sm btn-primary"><i
                                                                class="fa fa-search"></i></button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>-->

                                        <div class="col-sm-6">

                                            <!-- Action button -->

                                        </div>
                                    </div><!-- /.row -->

                                    <div class="table-responsive">
                                        <!-- THE MESSAGES -->
                                        <table class="table table-mailbox">
                                            <thead>
                                            <tr>
                                                <!--<th width="1%">
                                                    <label style="margin-right: 10px;">
                                                        <input type="checkbox" id="check-all"/>
                                                    </label>
                                                </th>-->
                                                <th width="4%">状态</th>
                                                <th>发件人</th>
                                                <th>主题</th>
                                                <th>时间</th>
                                                <!--<th>邮件管理</th>-->
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr th:each="mailDeletedList:${mailDeletedList}">
                                                <!--<td class="small-col"><input type="checkbox"/></td>-->
                                                <td th:text="${mailDeletedList.state}"></td>
                                                <td>
                                                    <a  href="emaildeleted.html" th:href="@{/findMailDeletedById(id=${mailDeletedList.id})}"
                                                       th:text="${mailDeletedList.sendTo}"></a>
                                                </td>
                                                <td>
                                                    <a  href="emaildeleted.html" th:href="@{/findMailDeletedById(id=${mailDeletedList.id})}"
                                                       th:text="${mailDeletedList.subject}"></a>
                                                </td>
                                                <td th:text="${mailDeletedList.date}"></td>
                                                <!--<td>
                                                    <div class="btn-group">
                                                        <button type="button"
                                                                class="btn btn-default btn-sm btn-flat dropdown-toggle"
                                                                data-toggle="dropdown">
                                                            邮件管理 <span class="caret"></span>
                                                        </button>
                                                        <ul class="dropdown-menu" role="menu">
                                                            <li><a href="#">标记为已读</a></li>
                                                            <li><a href="#">标记为未读</a></li>
                                                            <li class="divider"></li>
                                                            <li><a href="#">移到垃圾邮件箱</a></li>
                                                            <li class="divider"></li>
                                                            <li><a href="#">删除</a></li>
                                                        </ul>
                                                    </div>
                                                </td>-->
                                            </tr>
                                            </tbody>
                                        </table>
                                        <div class="modal-footer no-margin-top">
                                            <ul class="pagination pull-right no-margin">
                                                <!-- 首页 -->
                                                <li>
                                                    <a th:href="'/findAllMailsDeleted?pageNum=0'">首页</a>
                                                </li>
                                                <!-- 上一页 -->
                                                <li th:if="${mailDeletedList.hasPrevious()}">
                                                    <a th:href="'/findAllMailsDeleted?pageNum=' + ${mailDeletedList.previousPageable().getPageNumber()}"
                                                       th:text="上一页"></a>
                                                </li>
                                                <!-- 中间页 -->
                                                <li th:each="pageNum:${#numbers.sequence(0, mailDeletedList.getTotalPages() - 1)}">
                                                    <a th:href="'/findAllMailsDeleted?pageNum=' + ${pageNum}"
                                                       th:text="${pageNum + 1}"
                                                       th:if="${pageNum ne mailDeletedList.pageable.getPageNumber()}"></a>
                                                    <a th:href="'/findAllMailsDeleted?pageNum=' + ${pageNum}"
                                                       th:text="${pageNum + 1}"
                                                       th:if="${pageNum eq mailDeletedList.pageable.getPageNumber()}"
                                                       th:style="'font-weight:bold;background: #6faed9;'"></a>
                                                </li>
                                                <!-- 下一页 -->
                                                <li th:if="${mailDeletedList.hasNext()}">
                                                    <a th:href="'/findAllMailsDeleted?pageNum=' + ${mailDeletedList.nextPageable().getPageNumber()}"
                                                       th:text="下一页"></a>
                                                </li>
                                                <!-- 尾页 -->
                                                <li>
                                                    <a th:href="'/findAllMailsDeleted?pageNum=' + ${mailDeletedList.getTotalPages() - 1}">尾页</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div><!-- /.table-responsive -->
                                </div><!-- /.col (RIGHT) -->
                            </div><!-- /.row -->
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div><!-- /.col (MAIN) -->
            </div>
            <!-- MAILBOX END -->

        </section><!-- /.content -->
    </aside><!-- /.right-side -->
</div><!-- ./wrapper -->

<!-- COMPOSE MESSAGE MODAL -->
<div class="modal fade" id="compose-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><i class="fa fa-envelope-o"></i> 新建邮件</h4>
            </div>
            <form action="/sendMail" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">To:</span>
                            <input name="email_to" type="email" class="form-control" placeholder="收件人：">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Subject:</span>
                            <input name="email_subject" type="text" class="form-control" placeholder="主题：">
                        </div>
                    </div>
                    <div class="form-group">
                        <textarea name="message" id="email_message" class="form-control" placeholder="正文："
                                  style="height: 120px;"></textarea>
                    </div>
                    <!--<div class="form-group">
                        <div class="btn btn-success btn-file">
                            <i class="fa fa-paperclip"></i> 附件
                            <input type="file" name="attachment"/>
                        </div>
                        <p class="help-block">文件最大限制：32MB</p>
                    </div>-->
                </div>
                <div class="modal-footer clearfix">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> 取消
                    </button>
                    <button type="submit" class="btn btn-primary pull-left"><i class="fa fa-envelope"></i> 发送</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- jQuery 2.0.2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>-->
<!-- Bootstrap -->
<script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="../static/js/AdminLTE/app.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<!--<script src="../static/js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>-->
<!-- iCheck -->
<script src="../static/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<!-- Page script -->
</body>
</html>